<template>
  <div class="authentication">
    <div class="com-top-nav">
      <van-nav-bar title="个人认证" left-arrow @click-left="onClickLeft" />
    </div>
    <div>
      <van-cell-group>
        <van-field v-model="formData.username" required clearable label="姓名" placeholder="请输入真实姓名" />
        <van-field label="身份证" v-model="formData.id" placeholder="请输入身份证号" required />
        <van-field v-model="formData.phone" label="手机号" placeholder="请输入手机号" required />
        <p class="identify-require">
          <span class="text">身份证</span>&nbsp;&nbsp;&nbsp;照片须为本人手持身份证，身份证号必须清晰可见
        </p>

            <img @click="clickimg1" v-show="file" style="height:100px;width:140px;margin-left:20px;" :src="file" alt="">
            <img @click="clickimg2" v-show="file2" style="height:100px;width:140px;" :src="file" alt="">

        <van-uploader v-show="!file" class="auth-img" :after-read="onRead" multipart :name="'avatar'">
          <div>
            <van-icon name="photograph" />
            <p>正面照片</p>
          </div>
        </van-uploader>
        <van-uploader v-show="!file2" class="auth-img" :after-read="onRead2" :name="'avatar'">
          <div>
            <van-icon name="photograph" />
            <p>背面照片</p>
          </div>
        </van-uploader>
      </van-cell-group>
      <div class="button">
        <van-button size="large" @click="handleSubmit">提交认证</van-button>
      </div>

    </div>
    <div>
    </div>
  </div>
</template>
<script>
  import validator from "../../common/validatorFunction";
  import {
    Uploader
  } from "vant";
  export default {
    data() {
      return {
        isShowError: false,
        errorTips: "",
        store_status:true,
        src: "",
        file:'',
        file2:'',
        formData: {
          username: "",
          id: "",
          phone: "",
          cardFront: "",
          cardBack: "",
          files: []
        },
        rules: {
          name: [{
            require: true,
            message: "请输入姓名"
          }],
          id: [{
            require: true,
            message: "请输入身份证号"
          }],
          cardFront: [{
            require: true,
            message: "请上传身份证正面照片"
          }],
          cardBack: [{
            require: true,
            message: "请上传身份证反面照片"
          }],
          phone: [{
            require: true,
            message: "请输入手机号"
          }]
        }
      };
    },
    name: "authentication",
    methods: {
      clickimg1(){
        this.file = ''
      },
      clickimg2(){
        this.file2 = ''
      },
      onRead: function (file) {

        let _this =this;
        // this.imgurl1 = file.content
        let Form = new FormData();
        Form.append('avatar', file.file);
        this.axios.post('/api/upload',Form).then(res=>{
          if(res.data.err_code ==0){
            this.file = res.data.data.imgUrl;
          }
        })
      },
      onRead2: function (file) {

        let _this =this;
        // this.imgurl1 = file.content
        let Form = new FormData();
        Form.append('avatar', file.file);
        this.axios.post('/api/upload',Form).then(res=>{
          if(res.data.err_code ==0){
            this.file2 = res.data.data.imgUrl;
          }else{

          }
        })
      },
      onClickLeft() {
        this.$router.go(-1);
      },
      handleSubmit() {
        // var data = new FormData()
        // data.append('avatar',file.file)
        let params = {
          uid:JSON.parse(sessionStorage.getItem('user')).uid,
          name:this.formData.username,
          idNo:this.formData.id,
          idImg1:this.file,
          idImg2:this.file2,
          phone:this.formData.phone
        };
        if(!params.name ||!params.idNo||!params.idImg1||!params.idImg2||!params.phone){
           this.$toast({message:'请将信息填写完整再提交'});
          return;
        }
        this.axios.get('/api/identify',{params}).then(r=>{
          if(r.data.err_code ==0){
            this.$toast({message:'认证成功'});
            setTimeout(()=>{
              this.$router.replace({name:'mine'})
            },500)
          }else{
            this.$toast({message:r.data.data})
          }

        })

      }

    }
  };

</script>

<style scoped lang="less" type="text/less">
  @import url("../../../static/style/var"); .button { padding-left: 10px; padding-right: 10px; margin-top: 30px; } .identify-require
  { color: @weak-tips-color; line-height: 40px; /*no*/ font-size: @weak-tips-size; /*px*/ padding-left: 15px; .text { color:
  @normal-font-color; font-weight: bold; } &::before { content: "*"; position: absolute; left: 7px; font-size: 14px; color:
  #f44; } } .auth-img { width: 140px; height: 100px; margin-left: 5px; margin-bottom: 10px; background-color: #f9f9f9; text-align:
  center; border: 1px solid @border-color-default; border-radius: 4px; div { margin-top: 30px; } }
</style>
